<template>
  <h1>我是用户首页</h1>
  <button @click="addUser" style="width: 60px;height: 30px">添加用户</button>
  <div class="pug-dialog-box" v-show="showAdd">
    <add></add>
  </div>
  <div class="pug-dialog-box-overplay" v-show="showAdd" @click="this.showAdd=false">
  </div>
</template>

<script>
import Add from '@/views/user/useradd';
export default {
  name: "index",
  components:{
    Add
  },
  data() {
    return {
      showAdd: false
    }
  },
  methods: {
    addUser(){
      this.showAdd = true
    }
  },
  beforeRouteLeave(to,from){
    // 导航即将离开组件的路由时调用
    // 可以访问组件实例this
    console.log(to,from);
    var con = confirm("你的数据还没有保存成功！你真的要离开吗？")
    if (!con){
      return false;
    }
  }
}
</script>

<style>
    
.pug-dialog-box{
  position: fixed;
  right: 0;
  top: 48px;
  bottom: 0;
  width: 45%;
  z-index: 100;
  background: aquamarine;
}

.pug-dialog-box-overplay{
  position: fixed;
  right: 0;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 99;
  background: rgba(0,0,0,0.5);
}

</style>